<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>申请提现记录</span>
      </div>
      <div class="list-search">
        <el-select
          v-model="utype"
          class="list-options"
          placeholder="不限身份"
          @change="funSearch"
        >
          <el-option label="不限身份" value="" />
          <el-option label="企业会员" value="1" />
          <el-option label="个人会员" value="2" />
        </el-select>
        <el-select
          v-model="status"
          class="list-options"
          placeholder="不限审核状态"
          @change="funSearch"
        >
          <el-option label="不限审核状态" value="" />
          <el-option label="审核不通过" value="1" />
          <el-option label="审核通过" value="2" />
          <el-option label="未审核" value="3" />
        </el-select>

        <el-select
          v-model="is_openid"
          class="list-options"
          placeholder="不限微信绑定"
          @change="funSearch"
        >
          <el-option label="不限微信绑定" value="" />
          <el-option label="已绑定微信" value="1" />
          <el-option label="未绑定微信" value="2" />
        </el-select>


        <el-input
          v-model="keyword"
          placeholder="请输入搜索内容"
          class="input-with-select"
          @keyup.enter.native="funSearchKeyword"
        >
          <el-select
            slot="prepend"
            v-model="key_type"
            placeholder="请选择"
            class="input-sel"
          >
            <el-option label="UID" value="1" />
            <el-option label="用户名" value="2" />
            <el-option label="手机号" value="3" />
            <el-option label="企业名称" value="4"/>
            <el-option label="会员姓名" value="5" />
          </el-select>
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="funSearchKeyword"
          />
        </el-input>
      </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        fit
        highlight-current-row
      >
        <el-table-column label="会员名称" align="left">
          <template slot-scope="scope">
            <span>{{ scope.row.username}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="会员类型">
          <template slot-scope="scope">
            <span>{{ scope.row.utype_msg }}</span>
<!--            <span>{{ scope.row.addtime | timeFilter }}</span>-->
          </template>
        </el-table-column>
        <el-table-column align="center" label="微信状态">
          <template slot-scope="scope">{{ scope.row.bind_msg }}</template>
        </el-table-column>
        <el-table-column align="center" label="申请提现金额">
          <template slot-scope="scope">
            <span lass="font_warning">{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="申请时间">
          <template slot-scope="scope">
            <span>{{ scope.row.addtime | timeFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 0">审核不通过</span>
            <span v-if="scope.row.state == 1">审核通过</span>
            <span v-if="scope.row.state == 2">审核中</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核时间">
          <template slot-scope="scope">
            <span v-if="scope.row.examinetime != 0">{{ scope.row.examinetime | timeFilter }}</span>
            <span v-if="scope.row.examinetime == 0">-</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.state != 2" style="background-color: #ddd8d5;color:#fff;border-color: #ddd8d5;" size="small" type="warning" disabled>审核</el-button>
            <el-button v-if="scope.row.state == 2" size="small" type="warning" @click="funAudit(scope.row)">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="spaceline" />
      <el-row :gutter="20" style="width:100%">
        <el-col :span="20" style="text-align: right;width:100%">
          <el-pagination
            background
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>
      <el-dialog
        title="提现审核"
        :visible.sync="dialogFormVisible"
        width="25%"
      >
        <el-form class="common-form" label-width="80px">
          <el-form-item label="审核状态">
            <el-radio-group v-model="setAuditVal">
              <el-radio
                v-for="(item, index) in options_audit"
                :key="index"
                :label="index"
              >
                {{ item }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="setAuditVal == 1" label="原因">
            <el-input v-model="setAuditReason" type="textarea" rows="3" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="fun_set_audit"> 确 定 </el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { withdrawalApplication,examine  } from '@/api/red_envelopes'
import { parseTime } from '@/utils/index'

export default {
  filters: {
    timeFilter(timestamp) {
      return parseTime(timestamp, '{y}-{m}-{d} {h}:{i}:{s}')
    }
  },
  data() {
    return {
      utype:'',
      status:'',
      is_openid:'',
      keyword:'',
      key_type: '1',
      list: null,
      dialogFormVisible:false,
      setAuditReason: '',
      setAuditVal: 0,
      listLoading: true,
      options_audit: ['通过','拒绝'],
      total: 0,
      currentPage: 1,
      auditIdarr:0,
      pagesize: 10
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      const param = {
        status: this.status,
        is_openid: this.is_openid,
        utype: this.utype,
        key_type: this.key_type,
        keyword: this.keyword,
        page: this.currentPage,
        pagesize: this.pagesize
      }
      withdrawalApplication(param).then(response => {
        this.list = response.data.items
        this.listLoading = false
        this.total = response.data.total
        this.currentPage = response.data.current_page
        this.pagesize = response.data.pagesize
      })
    },
    cancel(){
      this.dialogFormVisible = false
    },
    handleSizeChange(val) {
      this.pagesize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    funAudit(row) {
      this.setAuditReason = ''
      this.setAuditVal = 0
      this.auditIdarr = row.id
      this.dialogFormVisible = true
    },
    fun_set_audit(){
      let that = this
      const params = {
        id: this.auditIdarr,
        audit: this.setAuditVal,
        reason: this.setAuditReason
      }
      examine(params, 'post').then(response => {
          this.$message.success(response.message)
          this.fetchData();
          this.auditSubmitLoading = false
          that.dialogFormVisible = false
      }).catch(response => {
        that.dialogFormVisible = false
      })
    },

    funSearchKeyword() {
      this.currentPage = 1
      this.fetchData()
    },
    funSearch() {
      this.fetchData()
    },
  }
}
</script>
